[#ftl]
[#macro styleMixin]
	_customeCSS3:["transform","transform-origin","transition","keyframes","animation","animation-play-state"]
	,getStylePrefix:function(){
		if(this.stylePrefix == undefined){
			this.stylePrefix = "";
			if(has("webkit") != undefined){
				this.isWebKit = has("webkit");
				this.stylePrefix = "-webkit-";
			}else if(has("ie") != undefined){
				this.isIE = has("ie");
				 if(this.isIE == 9){
					 this.stylePrefix = "-ms-";
				 }	
			}else if(has("mozilla") != undefined){	
				this.isMozilla = has("mozilla");
				if(has("ff") < 37){
					this.stylePrefix = "-moz-";
				}
			}else if(has("opera") != undefined){
				this.isOpera = has("opera");
				this.stylePrefix = "-o-";
			}else if(navigator.appVersion.indexOf("rv:11") != -1){		
				this.isIE = 11;
				this.stylePrefix = "-ms-";
			}
		}
		return this.stylePrefix;
	}
	,capitalize:function(text,excludeFirstWord){
		var newText = "";
		var words = text.split(" ");
		for(var i = excludeFirstWord?1:0; i < words.length; i++){
			newText += words[i].substring(0,1).toUpperCase() + words[i].substring(1);
		}
		if(excludeFirstWord){
			newText = words[0] + newText;
		}
		return newText;
	}
	,adviseCssName4Html:function(htmlName){
		var newName = htmlName;
		var stylePrefix = this.getStylePrefix();
		for(var i = this._customeCSS3.length - 1; i >= 0; i--){
			if (htmlName == this._customeCSS3[i]){ 
				newName = stylePrefix + htmlName;
				break;
			}
		}
		return newName;
	}
	,adviseCssRules:function(css){
		if(this._customeCSS3Rexp == undefined){
			this._customeCSS3Rexp = {};
			for(var i = 0; i < this._customeCSS3.length; i++){
				this._customeCSS3Rexp[this._customeCSS3[i]] = new RegExp(this._customeCSS3[i]+":","g");
			}
		}
		//TODO:performance turning to avoid looping
		var newCss =  css;
		var stylePrefix = this.getStylePrefix();
		if(newCss){
			for(var e in this._customeCSS3Rexp){
				newCss = newCss.replace(this._customeCSS3Rexp[e],stylePrefix + e + ":");
			}
		}
		return newCss;
	}
	
	,adviseCssName4Js:function(htmlName){
		var newName = htmlName;
		var customized = false;
		var stylePrefix = this.getStylePrefix();
		for(var i = agile._customeCSS3.length - 1; i >= 0; i--){
			if (htmlName == agile._customeCSS3[i]){
				customized = true;
				break;
			}
		}
		
		if(customized && stylePrefix != ""){
			newName = stylePrefix.replace(/-/g,"") + this.capitalize(htmlName.replace(/-/g," "),false).replace(/ /g,"");			
		}else{
			newName = this.capitalize(htmlName.replace(/-/g," "),true).replace(/ /g,"");
		}
//		console.log("@@@@@@@@@",customized,name,newName);
		return newName;
	}
	,keyframes2String:function(name,keyframes){
		var styleRule = "";
		for(var e in keyframes){
			//p0 -> 0%, p100-100%
			styleRule += e.substring(1) + "% {" + keyframes[e] +"} ";			
		}
		if(styleRule){
			styleRule = "@"+this.adviseCssName4Html("keyframes") + " " + name + " {" + styleRule +"}";
		}
		
		return styleRule;
	}	
	,addDynamicStyleRule:function(styleRule){
		var styleSheet = window._dynamicStyleSheet;
		if(!styleSheet){
			if(document.createStyleSheet){
				 styleSheet = document.createStyleSheet();
		    }else{
		         var dynamicStyle = document.createElement('style');  
		         dynamicStyle.type = 'text/css';
		         document.getElementsByTagName('head')[0].appendChild(dynamicStyle);	         
		         styleSheet = dynamicStyle.sheet;
		    }	   
		}		
		if(styleRule){
			styleSheet.insertRule(styleRule,styleSheet.cssRules.length);
		}
	}
[/#macro]